<template>
  <div id="app">
    <div class="app_login" v-if="$route.path=='/'">
       <router-view></router-view>
    </div>
    <div v-if="$route.path!='/'" class="page-container md-layout-column">
        <md-toolbar class="md-primary" :md-theme="'bottom-bar-' + theme">
          <md-button class="md-icon-button" @click="showNavigation = true">
            <md-icon>menu</md-icon>
          </md-button>
          <span class="md-title">生活百科</span>
          <div class="md-toolbar-section-end">
            <router-link to="/">
                <i class="iconfont icon-loginout"></i>
            </router-link>
          </div>
        </md-toolbar>

        <md-drawer :md-active.sync="showNavigation" :md-theme="'bottom-bar-' + theme">
          <md-toolbar class="md-transparent" md-elevation="0">
            <span class="md-title">生活百科</span>
          </md-toolbar>

          <md-list>
            <md-list-item>
              <md-icon>move_to_inbox</md-icon>
              <span class="md-list-item-text">Inbox</span>
            </md-list-item>

            <md-list-item>
              <md-icon>send</md-icon>
              <span class="md-list-item-text">Sent Mail</span>
            </md-list-item>

            <md-list-item>
              <md-icon>delete</md-icon>
              <span class="md-list-item-text">Trash</span>
            </md-list-item>

            <md-list-item>
              <md-icon>error</md-icon>
              <span class="md-list-item-text">Spam</span>
            </md-list-item>
          </md-list>
        </md-drawer>

        <md-content>
            <router-view></router-view>
            <md-progress-spinner :md-theme="'bottom-bar-' + theme" v-if="isLoading" md-mode="indeterminate"></md-progress-spinner>
            <div class="bottom_viewport">
              <md-bottom-bar md-type="shift" :md-theme="'bottom-bar-' + theme">
                <md-bottom-bar-item href="/#/movies" id="bottom-bar-item-home" md-label="电影" md-icon="home" @click="theme = 'blue'"></md-bottom-bar-item>
                <md-bottom-bar-item href="/#/ency" id="bottom-bar-item-pages" md-label="百科" md-icon="pages" @click="theme = 'orange'"></md-bottom-bar-item>
                <md-bottom-bar-item href="/#/music" id="bottom-bar-item-favorites" md-label="音乐" md-icon="favorite" @click="theme = 'teal'"></md-bottom-bar-item>
              </md-bottom-bar>
            </div>
        </md-content>
      </div>
   
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "app",
  data: () => ({
    showNavigation: false,
    theme: "blue"
  }),
  computed: {
    //相当于一个getter
    ...mapState({
      isLoading: state => state.isLoading
    })
  }
};
</script>
<style lang="scss">
    @import "~vue-material/dist/theme/engine";
    @include md-register-theme(
      "bottom-bar-blue",
      (
        primary: md-get-palette-color(blue, A200),
        accent: md-get-palette-color(red, A200)
      )
    );
    @include md-register-theme(
      "bottom-bar-teal",
      (primary: #E10601)
    );
    @include md-register-theme(
      "bottom-bar-orange",
      (primary: #84A0B8)
    );
    @import "~vue-material/dist/theme/all";
</style>
<style lang="less">
@import "./styles/index";
@import "./styles/var";
#app {
  width: 100%;
  height: 100%;
  font-size: @normalSize;
  background-color: @bodyColor;
  font-family: @FontDefault;
  // 字体抗锯齿渲染
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .app_login {
    height: 100%;
  }
  .page-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    .icon-loginout{
      color:#fff;
    }
    .md-toolbar {
      box-shadow: none;
    }
    .md-drawer {
      width: 230px;
      max-width: calc(100vw - 125px);
    }
    .md-progress-spinner {
      position: absolute;
      top: 200px;
      left: 37%;
    }
    .bottom_viewport {
      position: absolute;
      width: 100%;
      display: inline-flex;
      align-items: flex-end;
      overflow: hidden;
      bottom: 0;
    }
  }
}
</style>
